<template>
  <div>
    <a-card>
      <!-- form 表单 start -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-model-item label="系统:" labelAlign="left">
                <a-select allowClear v-model="queryParam.systemId" placeholder="请选择">
                  <a-select-option v-for="list in listInformation" :key="list.status" :value="list.status">
                    {{ list.text }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-model-item label="操作:" labelAlign="left">
                <a-select allowClear v-model="queryParam.action" placeholder="请选择">
                  <a-select-option v-for="action in actionList" :key="action.value" :value="action.value">
                    {{ action.label }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item label="操作时间:" labelAlign="left">
                <a-range-picker
                  v-model="timeValue"
                  valueFormat="YYYY-MM-DD"
                  @change="handleChangeDate"
                />
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-model-item label="项目名称:" labelAlign="left">
                <a-input v-model="queryParam.proName" ></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- form 表单 end -->
      <div class="table-operator" style="display: flex; justify-content: flex-end;">
        <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
        <a-button @click="clearCondition">重置</a-button>
        <a-button v-print="printLogObj" icon="printer" v-if="$auth('LOG.LOG_PRINT')">打印</a-button>
        <a-button :loading="exportLoading" type="button" icon="download" @click="clickExport" v-if="$auth('LOG.LOG_EXPORT')">导出</a-button>
      </div>
      <div class="table" :id="'table' + $props.no">
        <s-table
          ref="table"
          size="default"
          :rowKey="(record) => record.id"
          :columns="$auth('PROJECT.LOG_LIST') ? columns:[]"
          :data="loadData">
          <span slot="systemId" slot-scope="text, record">
            <template>
              {{ record.systemId | filtersState }}
            </template>
          </span>
          <span slot="proName" slot-scope="text, record">
            <template>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <div >{{ record.proName || '系统' }}</div>
                </template>
                {{ record.proId || '系统' }}
              </a-tooltip>
            </template>
          </span>
          <span slot="action" slot-scope="text, record">
            <template>
              {{ record.action | enumValueByKeyString($const.ACTION_TYPE) }}
            </template>
          </span>
          <div slot="oriJson" slot-scope="text, record" >
            <template>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <div v-html="getLine(record.oriJson)"></div>
                </template>
                <div v-html="getLine(record.oriJson,2)"></div>
              </a-tooltip>
            </template>
          </div>
          <div slot="afterJson" slot-scope="text, record" >
            <template>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <div v-html="getLine(record.afterJson)"></div>
                </template>
                <div v-html="getLine(record.afterJson,2)"></div>
              </a-tooltip>
            </template>
          </div>
          <span slot="createTime" slot-scope="text, record">
            <template>
              {{ record.createTime | moment() }}
            </template>
          </span>
          <span slot="row-action" slot-scope="text, record">
            <a @click="clickDetail(record)">详情</a>
          </span>
        </s-table>
      </div>
      <div v-show="false">
        <div id="printLog" style="border: 1px solid white">
          <div class="print">
            <div class="item mini">记录id</div>
            <div class="item mini">项目ID</div>
            <div class="item mini">操作事件</div>
            <div class="item mini">操作</div>
            <div class="item wrap">操作前</div>
            <div class="item wrap">操作后</div>
            <div class="item mini">操作人</div>
            <div class="item mini">操作人角色</div>
            <div class="item small">操作时间</div>
            <div class="item mini">系统</div>
          </div>
          <div v-for="(item,index) in dataList" :key="index" class="print">
            <div class="item mini">{{ item.id }}</div>
            <div class="item mini">{{ item.proId || '系统' }}</div>
            <div class="item mini">{{ item.operation }}</div>
            <div class="item mini">{{ item.action | enumValueByKey($const.ACTION_TYPE) }}</div>
            <div class="item wrap">{{ item.oriJson }}</div>
            <div class="item wrap">{{ item.afterJson }}</div>
            <div class="item mini">{{ item.uname }}</div>
            <div class="item mini">{{ item.roleName }}</div>
            <div class="item small">{{ item.createTime | moment() }}</div>
            <div class="item mini">{{ item.systemId | filtersState }}</div>
          </div>
        </div>
      </div>

      <a-modal
        :visible="detailModalVisible"
        title="日志详情"
        :footer="null"
        @cancel="handleDetailCancel">
        <a-descriptions v-if="detailRecord != null" style="word-break: break-all;word-wrap: break-word;" bordered>
          <a-descriptions-item :span="3" label="参数">
            {{ detailRecord.params }}
          </a-descriptions-item>
          <a-descriptions-item :span="3" label="原始信息">
            {{ detailRecord.oriJson }}
          </a-descriptions-item>
        </a-descriptions>
      </a-modal>

    </a-card>
  </div>
</template>
<script>
import { getLogList, getLogExport } from '@/api/system/systemlog'
import { exportExcel } from '@/utils/util'
import { buildPaginationObj } from '@/components/Table'
export default {
  props: {
    activeIndex: {
      type: Number,
      default: 1
    },
    no: {
      type: [Number, String],
      required: true
    }
  },
  components: {},
  data () {
    return {
      printLogObj: {
        id: 'printLog',
        popTitle: '安付'
      },
      exportLoading: false,
      // 时间
      createTime: [],
      listInformation: [
        { status: 1, text: 'payment' },
        { status: 2, text: 'consent' }
        // { status: 3, text: 'source' }
        // { status: 4, text: 'payment小程序' },
        // { status: 5, text: 'consent小程序' },
        // { status: 6, text: 'source小程序' }
      ],
      actionList: [
        {
          value: this.$const.ACTION_TYPE.VIEW.value,
          label: this.$const.ACTION_TYPE.VIEW.desc
        },
        {
          value: this.$const.ACTION_TYPE.ADD.value,
          label: this.$const.ACTION_TYPE.ADD.desc
        },
        {
          value: this.$const.ACTION_TYPE.UPDATE.value,
          label: this.$const.ACTION_TYPE.UPDATE.desc
        },
        {
          value: this.$const.ACTION_TYPE.DELETE.value,
          label: this.$const.ACTION_TYPE.DELETE.desc
        },
        {
          value: this.$const.ACTION_TYPE.EXPORT.value,
          label: this.$const.ACTION_TYPE.EXPORT.desc
        },
        {
          value: this.$const.ACTION_TYPE.IMPORT.value,
          label: this.$const.ACTION_TYPE.IMPORT.desc
        },
        {
          value: this.$const.ACTION_TYPE.LOGIN.value,
          label: this.$const.ACTION_TYPE.LOGIN.desc
        },
        {
          value: this.$const.ACTION_TYPE.LOGOUT.value,
          label: this.$const.ACTION_TYPE.LOGOUT.desc
        }
      ],
      loading: false,
      advanced: false,
      queryParam: {
        type: this.activeIndex
      },
      dataList: [],
      loadData: parameter => {
        console.log('loadData.parameter', this.queryParam)
        if (this.$auth('PROJECT.LOG_LIST')) {
          let proId = ''
          if (this.$store.getters.project != null) {
            proId = this.$store.getters.project.id
          }
          return getLogList(Object.assign(parameter, this.queryParam, { type: this.activeIndex, proId: proId })).then(res => {
            // res.content = this.parseData(res.content)
            this.dataList = res.content
            return res
          })
        } else {
          return Promise.resolve(buildPaginationObj([]))
        }
      },
      // 表头
      // columns: [
      //   {
      //     title: '时间',
      //     dataIndex: 'createTime',
      //     scopedSlots: { customRender: 'createTime' }
      //   },
      //   {
      //     title: '用户',
      //     dataIndex: 'uname'
      //   },
      //   {
      //     title: 'ip',
      //     dataIndex: 'ip'
      //   },
      //   {
      //     title: '系统',
      //     dataIndex: 'systemId',
      //     scopedSlots: { customRender: 'systemId' }
      //   },
      //   {
      //     title: '动作',
      //     dataIndex: 'action',
      //     scopedSlots: { customRender: 'action' },
      //     width: '80px'
      //   },
      //   {
      //     title: '业务模块',
      //     dataIndex: 'operation'
      //   },
      //   {
      //     title: '操作',
      //     dataIndex: 'row-action',
      //     width: '150px',
      //     scopedSlots: { customRender: 'row-action' }
      //   }
      // ],
      columns: [
        {
          title: '记录id',
          dataIndex: 'id'
        },
        {
          title: '项目ID',
          dataIndex: 'proName',
          scopedSlots: { customRender: 'proName' }
        },
        {
          title: '操作事件',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' }
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        },
        {
          title: '操作前',
          dataIndex: 'oriJson',
          scopedSlots: { customRender: 'oriJson' }
        },
        {
          title: '操作后',
          dataIndex: 'afterJson',
          scopedSlots: { customRender: 'afterJson' }
        },
        {
          title: '操作人',
          dataIndex: 'uname'
        },
        {
          title: '操作人角色',
          dataIndex: 'roleName'
        },
        {
          title: '操作时间',
          dataIndex: 'createTime',
          scopedSlots: { customRender: 'createTime' }
        },
        {
          title: '系统',
          dataIndex: 'systemId',
          scopedSlots: { customRender: 'systemId' }
        }
      ],
      // 日期控件 双向绑定
      timeValue: null,
      detailModalVisible: false,
      // 当前查看的详情信息
      detailRecord: null
    }
  },
  mounted () {

  },
  methods: {
    getLine (val, line = 0) {
      if (val) {
        val = val.replace(/,/g, '</br>')
      }
      if (line > 0 && val && val.split('</br>').length > line) {
        var index = this.find(val, '</br>', line - 1)
        val = val.substring(0, index) + '</br>...'
      }
      return val
    },
    find (str, cha, num) {
      var x = str.indexOf(cha)
      for (var i = 0; i < num; i++) {
        x = str.indexOf(cha, x + 1)
      }
      return x
    },
    // 清除条件
    clearCondition () {
      this.queryParam = {
        type: this.activeIndex
      }
      this.timeValue = null
      this.$refs.table.refresh(true)
    },
    // 选择创建时间
    handleChangeDate (value, dateString) {
      this.queryParam.startTime = dateString[0] ? dateString[0] + ' 00:00:00' : ''
      this.queryParam.endTime = dateString[1] ? dateString[1] + ' 23:59:59' : ''
    },
    clickExport () {
      console.log('打印日志')
      // delete exportParams.type// 删掉用不到的type参数
      let proId = ''
      if (this.$store.getters.project != null) {
        proId = this.$store.getters.project.id
      }
      this.exportLoading = true
      getLogExport({
        ...this.queryParam,
        proId: proId
      }).then(res => {
        console.log(res, 'export')
        exportExcel('日志', res)
      }).finally(res => {
        this.exportLoading = false
      })
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    // 重置事件
    resetForm () {
      this.queryParam = {}
      this.createTime = []
      this.$refs.table.refresh(true)
    },
    // 点击详情
    clickDetail (row) {
      this.detailRecord = row
      this.detailModalVisible = true
    },
    handleDetailCancel () {
      this.detailModalVisible = false
    },
    // 解析JSON对象
    parseData (data) {
      if (data) {
        const logObj = JSON.parse(data)
        const logArr = []
        for (const i in logObj) {
          logArr.push(logObj[i])
        }
        return logArr
      } else {
        return []
      }
    }
  },
  filters: {
    filtersState (val) {
      if (val === 1) {
        return 'payment'
      } else if (val === 2) {
        return 'consent'
      } else if (val === 3) {
        return 'source'
      } else if (val === 4) {
        return 'payment小程序'
      } else if (val === 5) {
        return 'consent小程序'
      } else if (val === 6) {
        return 'source小程序'
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .print{
    display: flex;
    margin-top: 15px;
    .item{
      text-align: center;
      word-break: break-all;word-wrap: break-word;
      margin: 0 5px;
    }
    .small{
      width:80px;

    }
    .mini{
      width:70px;
    }
    .wrap{
      flex: 1;
    }
  }
</style>
